<template>
  <div class="statistics-content statistics-1">
    <div class="grid grid-left">
      <div class="statistics-block">
        <div class="corner upper-left"></div>
        <div class="corner upper-right"></div>
        <div class="corner low-right"></div>
        <div class="corner left-lower"></div>
        <div class="chart" id="chart1"></div>
      </div>
      <div class="statistics-block">
        <div class="corner upper-left"></div>
        <div class="corner upper-right"></div>
        <div class="corner low-right"></div>
        <div class="corner left-lower"></div>
        <div class="chart" id="chart2"></div>
      </div>
    </div>
    <div class="grid grid-center">
      <div class="map-block" style="position: relative">
        <div class="number-block" style="position: relative;z-index: 1">
          <NumberItem class="number-item" v-for="item in numberData" :key="item.id" :name="item.name" :number="item.number" :color="item.color" :icon="item.icon"></NumberItem>
        </div>
        <div style="position: absolute;right:0px;bottom: -15px;color: #fff;font-size: 14px">就业数</div>
        <div id="map"></div>
      </div>
      <div class="statistics-block">
        <div class="corner upper-left"></div>
        <div class="corner upper-right"></div>
        <div class="corner low-right"></div>
        <div class="corner left-lower"></div>
        <div class="chart" id="chart3"></div>
      </div>
    </div>
    <div class="grid grid-right">
      <div class="statistics-block">
        <div class="corner upper-left"></div>
        <div class="corner upper-right"></div>
        <div class="corner low-right"></div>
        <div class="corner left-lower"></div>
        <div class="chart" id="chart4"></div>
      </div>
      <div class="statistics-block">
        <div class="corner upper-left"></div>
        <div class="corner upper-right"></div>
        <div class="corner low-right"></div>
        <div class="corner left-lower"></div>
        <div class="chart" id="chart5"></div>
      </div>
    </div>
    <Modal v-if="showMore" @closeModal="showMore=false" :title="moreType==1?'瓜州县未就业人数分布':'瓜州县就业困难人员'" width="1300px" height="730px">
      <UnemploymentMore :moreType="moreType"></UnemploymentMore>
    </Modal>
  </div>
</template>

<script>
import NumberItem from "@/components/NumbeItem/NumberItem.vue";
import {getNum} from "@/utils/utils";
import Modal from "@/components/Modal/Modal.vue";
import UnemploymentMore from "@/components/More/UnemploymentMore.vue";

export default {
  name: "Statistics1",
  components: {UnemploymentMore, NumberItem,Modal},
  data(){
    return{
      moreType:1,
      numberData:[
        {id:2,color:['#5c6aff','#4a29d8'],name:'全市劳动力（人）',icon:'icon-caishouzhongliang',number:1003120},
        {id:3,color:['#30cbf7','#1997e1'],name:'已就业人数（人）',icon:'icon-caishouzhongliang',number:780453},
        {id:4,color:['#12f1b8','#0db5e6'],name:'未就业人数（人）',icon:'icon-caishouzhongliang',number:221453},
        {id:5,color:['#f7c759','#fb838f'],name:'就业率（%）',icon:'icon-huoche',number:'86%'},
      ],
      showMore:false,
    }
  },
  methods: {
    initChart1(){
      let charts = this.$echarts.init(document.getElementById('chart1'));
      charts.showLoading({
        text: '加载中',
        textColor: '#fff',
        maskColor: 'rgba(0,0,0,0)'
      })
      let option = {
        title: {
          text: '就业率变化趋势',
          left:'center',
          top:10,
          textStyle: {
            color: '#46a9ff',
            fontSize: 17,
          }
        },
        xAxis: {
          type: 'category',
          data: ['5月','6月','7月','8月','9月','10月','11月','12月','1月'],
          axisLabel: {
            textStyle: {
              show: true,
              color: '#fff'
            }
          },
          axisTick: {
            show: false
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: 40,
          left: 30,
          right: 10,
          bottom: 30
        },
        legend:{
          textStyle:{
            color:'#fff'
          },
          right:10,
          top:10
        },
        yAxis: {
          type: 'value',
          splitLine: {//分割线配置
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          },
          max:100,
          min:0,
          axisLabel: {
            textStyle: {
              show: true,
              color: '#fff',
            }
          },
        },
        series: [
          {
            name: '就业率',
            data: getNum(9,80,70),
            type: 'line',
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#fff',
                    fontSize: 16
                  },
                  formatter:(e)=>{return `${e.value}%`}
                },
                color:'#26c9c5',
              }
            }
          },{
            name: '失业率',
            data: getNum(9,20,10),
            type: 'line',
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#fff',
                    fontSize: 16
                  },
                  formatter:(e)=>{return `${e.value}%`}
                },
                color:'#f8b765',
              }
            }
          }
        ]
      }
      charts.hideLoading();
      charts.setOption(option)
    },
    initChart2(){
      let charts = this.$echarts.init(document.getElementById('chart2'));
      charts.showLoading({
        text:'加载中',
        textColor:'#fff',
        maskColor:'rgba(0,0,0,0)'
      })
      let option = {
        color:['#2fc9f6','#42efa7'],
        title: {
          text: '重大项目和产业就业岗位占比',
          left:'center',
          top:10,
          textStyle: {
            color: '#46a9ff',
            fontSize: 17,
          }
        },
        series: [
          {
            name: '占比',
            type: 'pie',
            radius: ['0%', '50%'],
            center: ['50%', '50%'],
            itemStyle: {
              borderRadius: 1,
              normal:{
                label:{
                  color:'#fff',
                  formatter:'{b}: {c}个\n({d}%)',
                  fontSize:14
                }
              }
            },
            data: [
              {value: getNum(1,1000,800)[0], name: '重大项目'},
              {value:  getNum(1,300,100)[0], name: '重大产业'},
            ]
          }
        ]
      }
      charts.hideLoading();
      charts.setOption(option)
    },
    initMap() {
      let myCharts = this.$echarts.init(document.getElementById('map'));
      this.$axios.get('/static/js/jqs_json.json').then((res) => {
        this.$echarts.registerMap('jqsMap', res.data);
        let option = {
          visualMap: {
            left: 'right',
            top: 'bottom',
            max:10000,
            inRange: {
              color: [
                'rgba(17,74,112,0.2)',
                '#46a9ff',
              ]
            },
            textStyle: {
              color: "#fff"
            },
            calculable: true
          },
          xAxis: {
            axisLine: {show: false},
            splitLine: {show: false},
            axisLabel: {show: false},
            axisTick: {show: false}
          },
          yAxis: {
            axisLine: {show: false},
            splitLine: {show: false},
            axisLabel: {show: false},
            axisTick: {show: false}
          },
          series:[
            {
              map: "jqsMap",
              center:[96.171627,40.419396],
              zoom:12,
              type:'map',
              data:[
                {name: '肃州区', value: getNum(1,10000,8000)[0]},
                {name: '玉门市', value: getNum(1,9000,8000)[0]},
                {name: '金塔县', value: getNum(1,8000,7000)[0]},
                {name: '瓜州县', value: getNum(1,9000,8000)[0]},
                {name: '敦煌市', value: getNum(1,9000,8000)[0]},
                {name: '阿克塞县', value: getNum(1,6000,4000)[0]},
                {name: '肃北县', value: getNum(1,6000,4000)[0]},
              ],
              label: {
                show: true,
                fontSize: "14",
                color: "#fff"
              },
              itemStyle: {
                borderColor: "#058eb8",
                areaColor: "rgba(17,74,112,0.2)",
                borderWidth: 1,
                shadowBlur: 2,
                shadowColor: "#0f2652",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "14",
                  color: "#fff"
                },
                itemStyle: {
                  borderColor: "#058eb8",
                  areaColor: "#46a9ff",
                  borderWidth: 1,
                  shadowBlur: 2,
                  shadowColor: "#0f2652",
                }
              },
              select:{
                itemStyle: {
                  borderColor: "#058eb8",
                  areaColor: "#46a9ff",
                  borderWidth: 1,
                  shadowBlur: 2,
                  shadowColor: "#0f2652",
                },
                label: {
                  show: true,
                  fontSize: "14",
                  color: "#fff"
                }
              }
            }
          ]
        }
        myCharts.on('click',(e)=>{
          if(e.componentSubType=='map'){
            this.moreType=2;
            this.showMore=true;
          }
        })
        myCharts.setOption(option)
      })
    },
    initChart3(){
      let myCharts = this.$echarts.init(document.getElementById('chart3'));
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        title: {
          text: '劳动力行业分布',
          left:'center',
          top:10,
          textStyle: {
            color: '#46a9ff',
            fontSize: 17,
          }
        },
        grid: {
          left: '5%',
          right: '0',
          bottom: '20%',
        },
        color: ['#ff824a', '#fcc727'],
        legend: {
          top:10,
          right:0,
          show: true,
          itemWidth: 30,
          itemHeight: 15,
          textStyle: {
            color: "#fff"
          },
          data: ['男', '女'],
        },
        xAxis: {
          data: ['农、林、牧、渔业', '采矿业', '制造业', '电力、热力、燃气及水生产和供应业', '建筑业', '交通运输、仓储和邮政业', '信息传输、软件和信息技术服务业', '批发和零售业', '住宿和餐饮业', '金融业', '房地产业', '租赁和商务服务业', '科学研究和技术服务业', '水利、环境和公共设施管理业', '居民服务、修理和其他服务业', '教育', '卫生和社会工作', '文化、体育和娱乐业', '公共管理、社会保障和社会组织', '国际组织'],
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: '11'
            },
            interval: 0,
            formatter: function (value) {
              var ret = '';
              var maxLength = 3;
              var valLength = value.length;
              var rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                for (var i = 0; i < rowN; i++) {
                  var temp = '';
                  var start = i * maxLength;
                  var end = start + maxLength;
                  temp = value.substring(start, end) + '\n';
                  ret += temp;
                }
                return ret;
              } else {
                return value;
              }
            }
          }
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#999',
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
            }
          }
        },
        series: [{
          name: '男',
          type: 'bar',
          stack: '人数',
          barWidth:20,
          data: getNum(20,5000,1000),
        },
          {
            name: '女',
            type: 'bar',
            stack: '人数',
            barWidth:20,
            data: getNum(20,5000,1000)
          },
        ]
      };
      myCharts.setOption(option);
    },
    initChart4(){
      let charts = this.$echarts.init(document.getElementById('chart4'));
      charts.showLoading({
        text:'加载中',
        textColor:'#fff',
        maskColor:'rgba(0,0,0,0)'
      })
      let option = {
        title: {
          text: '各县市未就业人数分布',
          left:'center',
          top:10,
          textStyle: {
            color: '#46a9ff',
            fontSize: 17,
          }
        },
        xAxis: {
          type: 'value',
          splitLine: {//分割线配置
            show:true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          },
          axisLabel:{
            textStyle:{
              show:true,
              color: '#fff'
            }
          },
        },
        tooltip:{
          trigger:'axis',
          axisPointer:{
            type:'none'
          }
        },
        legend:{
          textStyle:{
            color:'#fff'
          },
          right:10,
          top:10
        },
        grid:{
          top:40,
          left:70,
          right:30,
          bottom:30
        },
        yAxis: {
          type: 'category',
          data: ['酒泉市','肃州区','金塔县','玉门市','瓜州县','肃北县','阿克塞县'],
          axisLabel:{
            textStyle:{
              show:true,
              color: '#fff',
              fontSize:14
            }
          },
          axisTick:{
            show:false
          }
        },
        series: [
          {
            name:'人数',
            data: getNum(8,4000,2000),
            type: 'bar',
            barWidth:13,
            itemStyle: {
              normal: {
                label:{
                  show:true,
                  position:'right',
                  textStyle:{
                    color:'#fff',
                    fontSize:16
                  },
                },
                barBorderRadius:[15, 15, 15, 15],
                color:new this.$echarts.graphic.LinearGradient(1,0,0,0,[{
                  offset:0,
                  color:'#09ace5'
                },{
                  offset:1,
                  color:'#3fe3a9'
                }])
              }
            }
          }
        ]
      }
      charts.on('click',(e)=>{
        if(e.componentSubType==='bar'){
          this.moreType=1;
          this.showMore=true;
        }
      })
      charts.hideLoading();
      charts.setOption(option)
    },
    initChart5(){
      let charts = this.$echarts.init(document.getElementById('chart5'));
      charts.showLoading({
        text:'加载中',
        textColor:'#fff',
        maskColor:'rgba(0,0,0,0)'
      })
      let option = {
        title: {
          text: '各县市交办督办完成率',
          left:'center',
          top:10,
          textStyle: {
            color: '#46a9ff',
            fontSize: 17,
          }
        },
        xAxis: {
          type: 'category',
          data: ['肃州区','金塔县','玉门市','瓜州县','肃北县','阿克塞县'],
          axisLabel:{
            textStyle:{
              show:true,
              color: '#fff'
            }
          },
          axisTick:{
            show:false
          }
        },
        tooltip:{
          trigger:'axis',
          axisPointer:{
            type:'none'
          }
        },
        grid:{
          top:50,
          left:40,
          right:10,
          bottom:30
        },
        yAxis: {
          type: 'value',
          splitLine: {//分割线配置
            show:true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          },
          axisLabel:{
            textStyle:{
              show:true,
              color: '#fff',
              fontSize:14
            }
          },
        },
        series: [
          {
            data: getNum(7,98,85),
            type: 'bar',
            barGap:'50%',
            barWidth:17,
            itemStyle: {
              normal: {
                label:{
                  show:true,
                  position:'top',
                  textStyle:{
                    color:'#fff',
                    fontSize:16
                  },
                  formatter:(e)=>{return `${e.value}%`}
                },
                barBorderRadius:[15, 15, 15, 15],
                color:new this.$echarts.graphic.LinearGradient(0,1,0,0,[{
                  offset:0,
                  color:'#f7f28e'
                },{
                  offset:1,
                  color:'#3ee3a9'
                }])
              }
            }
          }
        ]
      }
      charts.hideLoading();
      charts.setOption(option)
    }
  },
  mounted() {
    this.initChart1()
    this.initChart2()
    //this.initMap();
    this.initChart3()
    this.initChart4()
    this.initChart5()
  }
}
</script>

<style lang="scss" scoped>
$boxshadow: inset 0px 0px 20px 0px rgba(70, 169, 255, 0.75);
$border: 1px solid #46a9ff;
.statistics-content {
  width: calc(100% - 40px);
  margin: 0 auto;
  margin-top: 20px;
  height: calc(100% - 120px);

  .chart {
    width: 100%;
    height: 100%;
  }

  .corner {
    position: absolute;
    width: 15px;
    height: 15px;
  }

  .corner.upper-left {
    background: url("/static/upper-left.png") no-repeat center;
    background-size: 100%;
    left: -2px;
    top: -2px;
  }

  .corner.upper-right {
    background: url("/static/upper-right.png") no-repeat center;
    background-size: 100%;
    top: -2px;
    right: -2px;
  }

  .corner.low-right {
    background: url("/static/low-right.png") no-repeat center;
    background-size: 100%;
    bottom: -2px;
    right: -2px;
  }

  .corner.left-lower {
    background: url("/static/left-lower.png") no-repeat center;
    background-size: 100%;
    bottom: -2px;
    left: -2px;
  }

  .statistics-block {
    padding: 10px;
    position: relative;
    border: $border;
    box-shadow: $boxshadow;
  }
}

.statistics-content {
  display: flex;
  flex-direction: row;

  .grid {
    height: 100%;
  }

  .grid.grid-left,.grid.grid-right {
    width: calc(100%/4);
  }
  .grid.grid-center{
    width: calc(100%/2);
    padding:0 20px;
    .statistics-block{
      width: 100%;
      height: calc(100%/3 - 20px);
      margin-top: 20px;
    }
  }
  .statistics-block{
    width: 100%;
    height: calc(50% - 10px);
    margin-bottom: 20px;
    .chart{
      width: 100%;
      height: 100%;
    }
  }
  .statistics-block:last-child{
    margin-bottom: 0;
  }
  .map-block{
    width: 100%;
    height: calc(100%/3*2);
    position: relative;
    #map{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }
    .number-block{
      width: 100%;
      display: flex;
      flex-direction: row;
      height: 90px;
      .number-item{
        width: calc((100% - 90px)/4);
        margin-right: 30px;
      }
      .number-item:last-child{
        margin-right: 0;
      }
    }
  }
}
</style>
